<template>
<!-- 首页 -->
  <div class="home" >
    <el-container id="container">
        <el-header style="width:100%">
            <div class="header">
                <ul class="ul">
                    <li class="li01">
                        <img src="@/assets/elm.png">
                            <span class="span01">.</span>
                            <span class="span02">后台管理平台</span>
                    </li>
                    <li class="li02">
                        <el-dropdown :hide-on-click="false" >
                            <span class="lispan1"><img src="../assets/logo.png"></span>
                            <el-dropdown-menu slot="dropdown" style="margin-left: 32px;margin-top: -10px;">
                                <el-dropdown-item divided><a @click="getPersonInfo()">个人信息</a></el-dropdown-item>
                                <el-dropdown-item divided><a @click="getUpdatePassword()">修改密码</a></el-dropdown-item>
                                <el-dropdown-item divided><a @click="logOut()">退出登录</a></el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <span class="lispan2">欢迎您，{{userName}}</span>
                    </li>
                </ul>
            </div>
        </el-header>
        <!-- <div style="width:100%;height:100%;background-color: rgb(245,247,250);"> -->
        <el-container style="width:100%;margin: 0 auto" id="container">
            <el-aside width="200px">
                <el-row class="tac">
                    <el-menu
                    default-active="3"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    router
                    style="width:199px;"
                    @close="handleClose">
                        <el-submenu v-for="item in haveChildrens" :key="item.id" :index=item.createTime>
                        <template slot="title"><i :class=item.icon></i><span>{{item.menuName}}</span></template>
                        <el-menu-item v-for="chils in item.childrens" :key="chils.id" :index=chils.path><i :class=chils.icon></i>{{chils.menuName}}</el-menu-item>
                        </el-submenu>
                    <el-menu-item v-for="item in noChildren" :key="item.id" :index=item.path>
                      <i :class=item.icon></i>{{item.menuName}}
                    </el-menu-item>
                  </el-menu>
                </el-row>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
        <!-- </div> -->
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userName: window.sessionStorage.getItem('userName'),
      noChildren: [],
      haveChildrens: []
    }
  },
  mounted () {
    this.listMenu()
  },
  methods: {
    getUpdatePassword () {
      this.$router.push('/UpdatePasswordView')
    },
    getPersonInfo () {
      this.$router.push('/PersonInfo')
    },
    logOut () {
      window.sessionStorage.setItem('token', '')
      this.$router.push('/')
      this.myMessage('success', '退出登录成功')
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    listMenu () { // 菜单全查
      const roleId = window.sessionStorage.getItem('roleId')
      this.$axios.get('/menuBack/listMenuByRoleId?id=' + roleId).then(res => {
        if (res.data.flag) {
          let i = 0
          while (i < res.data.obj.length) {
            if (res.data.obj[i].childrens.length > 0) {
              this.haveChildrens.push(res.data.obj[i])
            } else {
              this.noChildren.push(res.data.obj[i])
            }
            i++
          }
        } else {
          this.myMessage('error', '查询失败，请联系管理员')
        }
      })
    },
    myMessage (type, message) {
      this.$message({
        message: message,
        type: type
      })
    }
  }
}
</script>

<style>
    .home{
        height: 100%;
    }

    .el-header, .el-footer {
        /* background-color: rgb(93,128,245); */
        /* back.jpeg */
        background-image: url('@/assets/headBackBlue.jpeg');
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #ffffff;
        color: #333;
        text-align: center;
        /* line-height: 160px; */
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
    #container{
        height: 100%;
    }
    .header{
        width: 100%;
        height: 60px;
        /* background-color: aliceblue; */
        /* margin-top: -16px; */
    }
    .ul{
        height: 60px;
        /* width: 100%; */
        /* background-color: rgb(93,128,245); */
        list-style-type: none;
        margin: 0 auto;
    }
    .li01{
        width: 300px;
        height: 60px;
        /* background-color: rgb(93,128,245); */
        margin-top: 2px;
        margin-left: -18px;
        float: left;
    }
    .li01 img{
        width: 74px;
        height: 20px;
        margin-right: 150px;
        margin-top: 21px;
        float: left;
        cursor: pointer;
    }
    .span01 {
        float: left;
        color: white;
        font-size: 50px;
        margin-top: -17px;
        margin-left: -144px;
        cursor: pointer;
    }
    .span02{
        color: white;
        margin-left: -123px;
        margin-top: 1px;
        font-weight: bold;
        float: left;
        cursor: pointer;
    }
    .li02{
        width: 500px;
        height: 60px;
        /* background-color: bisque; */
        float: right;
        cursor: pointer;
    }
    .lispan1{
        width: 56px;
        height: 100%;
        float: left;
        margin-left: 100px;
    }
    .lispan1 img{
        width: 45px;
        height: 40px;
        margin: 0 auto;
        margin-top: 10px;
        border-radius: 30px;
        margin-left: -32px;
    }
    .lispan2{
        width: 280px;
        height: 100%;
        color: white;
        font-size: 20px;
        float: right;
        /* margin-right: 30px; */
        text-align: left;
    }
    .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
    }
    /* .el-dropdown {
        margin-left: 100px
    } */
</style>
